import React, {Component} from 'react'
import {Button, Icon, Carousel} from 'antd-mobile';

const goodsText = [
    {
        text: '商品描述',
        show: false,
        title: '',
        msg: '着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊着就是商品的描述啊'
    },
    {
        text: '订单与配送',
        show: true,
        title: '',
        msg: '我们的目标是确保您尽快收到订单。成功提交订单后，仓库将立即处理您的订单。然后挑选，包装和发送。一旦快件发出，您将通过微信收到跟踪信息以及预计交货日期的信息。您应该在2-4个工作日之后收到订单。订单不在周末和当地公众假期运输(除中国地区外) 。请注意，预计交货时间(2- 4个工作日)是预计时间，可能因Petit Projects以外的外部因素而有所不同。这些因素可能包括但不限于极端天气条件，技术故障，海关延误等。此外， 请注意，在促销活动期间，交付时间可能比平时更长。运费取决于运费选项，包裹和目的地国家的重量，在您完成订单之前，结账时会清楚地显示实际运费',
        title: '当日配送服务'
    },
    {text: '退货需知', show: true, title: '', msg: '退货需知退货需知退货需知退货需知退货需知退货需知退货需知退货需知退货需知退货需知'}
]

//商品详情
class GoodsInfo extends Component {
    constructor(props) {
        super(props)
        this.state = {
            goodsMsg: goodsText,
            swipeData: [1, 2, 3]
        }
    }

    componentDidMount() {
    }

    changeMenu(menuIndex) {
        console.log(menuIndex)
        let goodsInfo = this.state.goodsMsg
        console.log(goodsInfo[menuIndex])
        goodsInfo[menuIndex].show = !goodsInfo[menuIndex].show
        this.setState({
            goodsMsg: goodsInfo
        })
    }

    render() {
        return (
            <div id='goodsInfo'>
                <div className='header_title'>
                    <span>FEATURED LOOK</span>
                    <span>吃樱桃的季节</span>
                </div>
                <div className='swipeList'>
                    <Carousel infinite={true} autoplay={true}
                              beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                              afterChange={index => console.log('slide to', index)}
                    >
                        {
                            this.state.swipeData.map((v, i) => (
                                <a style={{width: '100%', height: '100%', display: 'block'}} key={i}
                                   href="http://www.alipay.com">
                                    <img
                                        src={`https://img.alicdn.com/tps/TB1h9xxIFXXXXbKXXXXXXXXXXXX.jpg`}
                                        alt=""
                                        style={{width: '100%', verticalAlign: 'top'}}
                                    />
                                </a>
                            ))
                        }
                    </Carousel>
                </div>
                <div className="select_box">
                    <span className='text'>选择</span>
                    <span className='text'>一件 or 一套</span>
                    <span className='text'>购买一套享受免费送货服务</span>
                    <div className='btn_box'>
                        <div className="btn active">
                            <span className='text'>一套</span>
                            <span className='text'>RMB 500</span>
                        </div>
                        <div className="btn">
                            单件购买
                        </div>
                    </div>
                    {/*//商品详情*/}
                    <div className='goods'>
                        <div className='goods_item'>
                            <div>tinycottons 长袖T鳕
                                <span className='addCart'>+</span>
                            </div>
                            <span>RMB 300</span>
                        </div>
                        <div className='goods_item'>
                            <div>tinycottons 卫裤
                                <span className='addCart'>+</span>
                            </div>
                            <span>RMB 100</span>
                        </div>
                        <div className='goods_item'>
                            <div>tinycottons 袜子
                                <span className='addCart'>+</span>
                            </div>
                            <span>RMB 100</span>
                        </div>
                    </div>
                </div>
                {/*选择*/}
                <span className='price_all'>
                    一套总购价 Rmb：500
                </span>
                <Button className='goCart' type="primary">加入购物车</Button>
                <div style={{height: '26px', borderBottom: '1px solid #f0f0f0'}}></div>

                {/*商品详情*/}
                <div className="goods_info">
                    {
                        this.state.goodsMsg.map((v, i) => (
                            <div key={i}>
                                <div ii={i} onClick={this.changeMenu.bind(this, i)} className='goods_b'>
                                    <span className='title'>{v.text}</span>
                                    <Icon type={v.show ? 'down' : 'up'}/>
                                </div>
                                <div style={v.show ? {display: 'none'} : {display: 'block'}} className='goods_text'>
                                    {v.title ? <p className='title1'>{v.title}</p> : ''}
                                    <span>{v.msg}</span>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>
        )
    }
}

export default GoodsInfo